<template>
  <li class="msg-item" :class="msgItemData.status === 0 ? 'unread' : ''">
    <div class="inner">
      <div class="avatar-body">
        <nuxt-link :to="'/user/' + msgItemData.targetUserId + '?name=' + msgItemData.name" class="avatar">
          <img :src="msgItemData.avatar" alt="">
        </nuxt-link>
      </div>
      <div class="msg-body">
        <div class="msg-info">
<!--          <nuxt-link :to="'/user/' + msgItemData.targetUserId + '?name=' + msgItemData.name" class="name msg-info-item">-->
<!--            {{ msgItemData.name }}-->
<!--          </nuxt-link>-->
          <span class="title msg-info-item">
            {{ msgItemData.title }}
          </span>
          <span class="time msg-info-item">
            {{ $moment(msgItemData.createTime).fromNow() }}
          </span>
        </div>
        <div class="msg-content" @click="toRead(msgItemData.id)" v-html="toXss(msgItemData.content)" />
      </div>
      <div class="ctrl-body">
        <el-button v-show="msgItemData.status === 0" size="small" type="primary" @click="toRead(msgItemData.id)">
          点击已读
        </el-button>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  name: 'MsgItem',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      msgItemData: {}
    }
  },
  computed: {
    userData() {
      return this.$store.state.user.userData
    }
  },
  mounted() {
    this.msgItemData = this.data
  },
  methods: {
    toXss(str) {
      return this.$xss(str, {
        whiteList: {
          a: ['href', 'class']
        }
      })
    },
    async toRead(notificationId) {
      const params = {
        notificationId
      }
      const data = await this.$request({
        context: this,
        method: 'post',
        url: 'userNotification/isRead',
        params
      })
      if (!data) return
      this.msgItemData.status = 1
    }
  }
}
</script>

<style scoped lang="scss">
  @import "~@/assets/css/public";
  li.msg-item {
    &.unread {
      background: #fafafa;
    }
    padding: 0 20px;
    .inner {
      box-sizing: border-box;
      overflow: hidden;
      padding: 28px 0 30px;
      border-bottom: 1px solid $theme-color-border;
      display: flex;
      align-items: flex-start;

      .avatar-body {
        width: 42px;

        a.avatar {
          display: block;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          overflow: hidden;
          img {
            @include inner-img;
          }
        }
      }

      .msg-body {
        flex: 1;
        margin-left: 14px;
        font-size: 12px;
        .msg-info {
          .msg-info-item {
            margin-right: 10px;
          }
          .time {
            color: #999;
          }
        }
        .msg-content {
          margin-top: 18px;
        }
      }

      .ctrl-body {
        width: 120px;
      }
    }

  }
</style>
